<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格详情 - 用户地址数据系统</title>
    <link rel="stylesheet" href="relation-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="frame-integration.js"></script>
    <style>
        .dashboard-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .stats-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 20px;
            flex: 1;
            min-width: 230px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .stats-icon {
            width: 55px;
            height: 55px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }
        
        .stats-icon-manager {
            background-color: #e3f2fd;
            color: #2196f3;
        }
        
        .stats-icon-community {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        .stats-icon-address {
            background-color: #fff8e1;
            color: #ff9800;
        }
        
        .stats-icon-pending {
            background-color: #ffebee;
            color: #f44336;
        }
        
        .stats-content {
            flex: 1;
        }
        
        .stats-number {
            font-size: 24px;
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .stats-label {
            color: #707070;
            font-size: 14px;
        }
        
        .grid-profile {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 25px;
            overflow: hidden;
        }
        
        .profile-header {
            background-color: #f5f7fa;
            padding: 25px;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .profile-icon {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            background-color: #2196f3;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
        }
        
        .profile-info {
            flex: 1;
        }
        
        .profile-name {
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .profile-meta {
            color: #707070;
            margin-bottom: 15px;
        }
        
        .profile-status {
            display: inline-block;
            padding: 4px 12px;
            background-color: #e8f5e9;
            color: #4caf50;
            border-radius: 20px;
            font-size: 14px;
        }
        
        .profile-inactive {
            background-color: #ffebee;
            color: #f44336;
        }
        
        .profile-actions {
            display: flex;
            gap: 10px;
        }
        
        .profile-body {
            padding: 25px;
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
        }
        
        .profile-section {
            flex: 1;
            min-width: 300px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .info-label {
            color: #707070;
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .info-value {
            margin-bottom: 15px;
        }
        
        .tab-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 25px;
            overflow: hidden;
        }
        
        .tabs {
            display: flex;
            background-color: #f5f7fa;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .tab {
            padding: 15px 20px;
            cursor: pointer;
            font-weight: 500;
            color: #707070;
            position: relative;
        }
        
        .tab.active {
            color: #2196f3;
        }
        
        .tab.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #2196f3;
        }
        
        .tab-content {
            padding: 25px;
        }
        
        .tab-pane {
            display: none;
        }
        
        .tab-pane.active {
            display: block;
        }
        
        .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .list-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
        
        .list-action {
            font-size: 14px;
            color: #2196f3;
            cursor: pointer;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .data-table th,
        .data-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .data-table th {
            background-color: #f9fafb;
            color: #707070;
            font-weight: 500;
            font-size: 14px;
        }
        
        .data-table tr:last-child td {
            border-bottom: none;
        }
        
        .status-active {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            background-color: #e8f5e9;
            color: #4caf50;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-inactive {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            background-color: #ffebee;
            color: #f44336;
            font-size: 12px;
            font-weight: 500;
        }
        
        .view-more-link {
            text-align: center;
            margin-top: 20px;
        }
        
        .view-more-link a {
            color: #2196f3;
            text-decoration: none;
            font-weight: 500;
        }
        
        .activity-timeline {
            margin-top: 15px;
        }
        
        .timeline-item {
            display: flex;
            margin-bottom: 20px;
            position: relative;
        }
        
        .timeline-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #e3f2fd;
            color: #2196f3;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
            z-index: 1;
        }
        
        .timeline-content {
            flex: 1;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .timeline-title {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .timeline-desc {
            color: #555;
            margin-bottom: 5px;
        }
        
        .timeline-date {
            font-size: 12px;
            color: #888;
        }
        
        .timeline-item:last-child .timeline-content {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 18px;
            top: 36px;
            bottom: 0;
            width: 1px;
            background-color: #e0e0e0;
        }
        
        .timeline-item:last-child::before {
            display: none;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 25px;
            border-radius: 8px;
            width: 80%;
            max-width: 700px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: 500;
        }
        
        .close-modal {
            font-size: 24px;
            cursor: pointer;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 25px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="title-section">
                <h1>网格详情</h1>
                <p class="subtitle">查看网格详细信息及相关数据</p>
            </div>
            <div class="header-actions">
                <button class="btn btn-default" onclick="backToList()">
                    <i class="fas fa-arrow-left"></i> 返回列表
                </button>
                <button class="btn btn-primary" onclick="openEditGridModal()">
                    <i class="fas fa-edit"></i> 编辑网格
                </button>
            </div>
        </header>
        
        <!-- 网格基本信息 -->
        <div class="grid-profile">
            <div class="profile-header">
                <div class="profile-icon">
                    <i class="fas fa-th"></i>
                </div>
                <div class="profile-info">
                    <div class="profile-name">泉城路A网格</div>
                    <div class="profile-meta">历下区 - 泉城路街道 | 网格编号: GR001</div>
                    <div class="profile-status">
                        <i class="fas fa-check-circle"></i> 已启用
                    </div>
                </div>
                <div class="profile-actions">
                    <button class="btn btn-default" onclick="openAssignManagerModal()">
                        <i class="fas fa-user-plus"></i> 分配网格员
                    </button>
                </div>
            </div>
            <div class="profile-body">
                <div class="profile-section">
                    <div class="section-title">
                        <i class="fas fa-info-circle"></i> 基本信息
                    </div>
                    <div>
                        <div class="info-label">网格名称</div>
                        <div class="info-value">泉城路A网格</div>
                    </div>
                    <div>
                        <div class="info-label">网格编号</div>
                        <div class="info-value">GR001</div>
                    </div>
                    <div>
                        <div class="info-label">所在区</div>
                        <div class="info-value">历下区</div>
                    </div>
                    <div>
                        <div class="info-label">所在街道</div>
                        <div class="info-value">泉城路街道</div>
                    </div>
                </div>
                <div class="profile-section">
                    <div class="section-title">
                        <i class="fas fa-clipboard-list"></i> 其他信息
                    </div>
                    <div>
                        <div class="info-label">创建时间</div>
                        <div class="info-value">2023-06-15</div>
                    </div>
                    <div>
                        <div class="info-label">最后更新</div>
                        <div class="info-value">2023-10-21</div>
                    </div>
                    <div>
                        <div class="info-label">描述</div>
                        <div class="info-value">负责泉城路东部区域，包含恒大名都、文东花园等小区</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 统计信息 -->
        <div class="dashboard-summary">
            <div class="stats-card">
                <div class="stats-icon stats-icon-manager">
                    <i class="fas fa-user-tie"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">3</div>
                    <div class="stats-label">网格员数量</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon stats-icon-community">
                    <i class="fas fa-building"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">12</div>
                    <div class="stats-label">小区数量</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon stats-icon-address">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">256</div>
                    <div class="stats-label">地址总数</div>
                </div>
            </div>
            <div class="stats-card">
                <div class="stats-icon stats-icon-pending">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">18</div>
                    <div class="stats-label">待审核地址</div>
                </div>
            </div>
        </div>
        
        <!-- 标签页区域 -->
        <div class="tab-container">
            <div class="tabs">
                <div class="tab active" onclick="switchTab('gridManagers')">网格员管理</div>
                <div class="tab" onclick="switchTab('communities')">小区列表</div>
                <div class="tab" onclick="switchTab('activities')">操作日志</div>
            </div>
            
            <div class="tab-content">
                <!-- 网格员管理标签页 -->
                <div class="tab-pane active" id="gridManagers">
                    <div class="list-header">
                        <div class="list-title">网格员列表</div>
                        <div class="list-action" onclick="openAssignManagerModal()">
                            <i class="fas fa-plus"></i> 添加网格员
                        </div>
                    </div>
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th width="20%">姓名</th>
                                <th width="15%">工号</th>
                                <th width="20%">联系电话</th>
                                <th width="25%">负责范围</th>
                                <th width="10%">状态</th>
                                <th width="10%">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>张网格</td>
                                <td>GW1001</td>
                                <td>138****1234</td>
                                <td>恒大名都、文东花园</td>
                                <td><span class="status-active">在职</span></td>
                                <td>
                                    <button class="action-btn btn-view" onclick="viewGridManager('1001')">查看</button>
                                </td>
                            </tr>
                            <tr>
                                <td>李审核</td>
                                <td>GW1002</td>
                                <td>139****5678</td>
                                <td>泉城社区、文化路小区</td>
                                <td><span class="status-active">在职</span></td>
                                <td>
                                    <button class="action-btn btn-view" onclick="viewGridManager('1002')">查看</button>
                                </td>
                            </tr>
                            <tr>
                                <td>王地址</td>
                                <td>GW1003</td>
                                <td>137****9012</td>
                                <td>和谐花园、阳光公寓</td>
                                <td><span class="status-active">在职</span></td>
                                <td>
                                    <button class="action-btn btn-view" onclick="viewGridManager('1003')">查看</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 小区列表标签页 -->
                <div class="tab-pane" id="communities">
                    <div class="list-header">
                        <div class="list-title">小区列表</div>
                        <div class="list-action" onclick="openAddCommunityModal()">
                            <i class="fas fa-plus"></i> 添加小区
                        </div>
                    </div>
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th width="25%">小区名称</th>
                                <th width="20%">所属社区</th>
                                <th width="15%">楼栋数</th>
                                <th width="15%">地址数量</th>
                                <th width="15%">负责网格员</th>
                                <th width="10%">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>恒大名都</td>
                                <td>泉城社区</td>
                                <td>12</td>
                                <td>86</td>
                                <td>张网格</td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateToCommunity('101')">查看</button>
                                </td>
                            </tr>
                            <tr>
                                <td>文东花园</td>
                                <td>泉城社区</td>
                                <td>8</td>
                                <td>56</td>
                                <td>张网格</td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateToCommunity('102')">查看</button>
                                </td>
                            </tr>
                            <tr>
                                <td>泉城社区</td>
                                <td>泉城社区</td>
                                <td>6</td>
                                <td>42</td>
                                <td>李审核</td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateToCommunity('103')">查看</button>
                                </td>
                            </tr>
                            <tr>
                                <td>文化路小区</td>
                                <td>文化路社区</td>
                                <td>5</td>
                                <td>35</td>
                                <td>李审核</td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateToCommunity('104')">查看</button>
                                </td>
                            </tr>
                            <tr>
                                <td>和谐花园</td>
                                <td>文化路社区</td>
                                <td>4</td>
                                <td>24</td>
                                <td>王地址</td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateToCommunity('105')">查看</button>
                                </td>
                            </tr>
                            <tr>
                                <td>阳光公寓</td>
                                <td>文化路社区</td>
                                <td>3</td>
                                <td>18</td>
                                <td>王地址</td>
                                <td>
                                    <button class="action-btn btn-view" onclick="navigateToCommunity('106')">查看</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="view-more-link">
                        <a href="#" onclick="showAllCommunities()">
                            查看全部小区 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 操作日志标签页 -->
                <div class="tab-pane" id="activities">
                    <div class="activity-timeline">
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-title">添加网格员</div>
                                <div class="timeline-desc">将网格员"王地址"分配到当前网格</div>
                                <div class="timeline-date">2023-10-21 14:30:25</div>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fas fa-building"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-title">添加小区</div>
                                <div class="timeline-desc">将"阳光公寓"添加到当前网格</div>
                                <div class="timeline-date">2023-10-15 09:45:18</div>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fas fa-edit"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-title">修改网格信息</div>
                                <div class="timeline-desc">更新了网格描述信息</div>
                                <div class="timeline-date">2023-09-18 16:20:42</div>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-title">添加网格员</div>
                                <div class="timeline-desc">将网格员"李审核"分配到当前网格</div>
                                <div class="timeline-date">2023-08-05 11:35:09</div>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-title">添加网格员</div>
                                <div class="timeline-desc">将网格员"张网格"分配到当前网格</div>
                                <div class="timeline-date">2023-06-15 10:25:30</div>
                            </div>
                        </div>
                        
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fas fa-plus-circle"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-title">创建网格</div>
                                <div class="timeline-desc">创建"泉城路A网格"</div>
                                <div class="timeline-date">2023-06-15 10:10:15</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 编辑网格弹窗 -->
    <div id="editGridModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">编辑网格</div>
                <span class="close-modal" onclick="closeEditGridModal()">&times;</span>
            </div>
            <form id="editGridForm">
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label">网格名称</label>
                        <input type="text" class="form-control" name="name" value="泉城路A网格" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">网格编号</label>
                        <input type="text" class="form-control" name="code" value="GR001" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">所在区</label>
                        <select class="form-control" name="district" id="district-select" onchange="loadStreets()">
                            <option value="历下区" selected>历下区</option>
                            <option value="市中区">市中区</option>
                            <option value="槐荫区">槐荫区</option>
                            <option value="天桥区">天桥区</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">所在街道</label>
                        <select class="form-control" name="street" id="street-select">
                            <option value="泉城路街道" selected>泉城路街道</option>
                            <option value="解放路街道">解放路街道</option>
                            <option value="千佛山街道">千佛山街道</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">状态</label>
                        <select class="form-control" name="status">
                            <option value="active" selected>启用</option>
                            <option value="inactive">停用</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">网格描述</label>
                    <textarea class="form-control" name="description" rows="3">负责泉城路东部区域，包含恒大名都、文东花园等小区</textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeEditGridModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 分配网格员弹窗 -->
    <div id="assignManagerModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">分配网格员</div>
                <span class="close-modal" onclick="closeAssignManagerModal()">&times;</span>
            </div>
            <form id="assignManagerForm">
                <div class="form-group">
                    <label class="form-label">选择网格员</label>
                    <select class="form-control" name="manager" required>
                        <option value="">请选择</option>
                        <option value="1004">赵核实 (GW1004)</option>
                        <option value="1005">钱小区 (GW1005)</option>
                        <option value="1006">孙地址 (GW1006)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">负责小区</label>
                    <div style="margin-top: 10px;">
                        <div style="margin-bottom: 8px;">
                            <input type="checkbox" id="comm1" name="communities" value="101">
                            <label for="comm1" style="display: inline-block; margin-left: 5px;">恒大名都</label>
                        </div>
                        <div style="margin-bottom: 8px;">
                            <input type="checkbox" id="comm2" name="communities" value="102">
                            <label for="comm2" style="display: inline-block; margin-left: 5px;">文东花园</label>
                        </div>
                        <div style="margin-bottom: 8px;">
                            <input type="checkbox" id="comm3" name="communities" value="103">
                            <label for="comm3" style="display: inline-block; margin-left: 5px;">泉城社区</label>
                        </div>
                        <div style="margin-bottom: 8px;">
                            <input type="checkbox" id="comm4" name="communities" value="104">
                            <label for="comm4" style="display: inline-block; margin-left: 5px;">文化路小区</label>
                        </div>
                        <div style="margin-bottom: 8px;">
                            <input type="checkbox" id="comm5" name="communities" value="105">
                            <label for="comm5" style="display: inline-block; margin-left: 5px;">和谐花园</label>
                        </div>
                        <div style="margin-bottom: 8px;">
                            <input type="checkbox" id="comm6" name="communities" value="106">
                            <label for="comm6" style="display: inline-block; margin-left: 5px;">阳光公寓</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeAssignManagerModal()">取消</button>
                    <button type="submit" class="btn btn-primary">确认分配</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 添加小区弹窗 -->
    <div id="addCommunityModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">添加小区到网格</div>
                <span class="close-modal" onclick="closeAddCommunityModal()">&times;</span>
            </div>
            <form id="addCommunityForm">
                <div class="form-group">
                    <label class="form-label">选择小区</label>
                    <select class="form-control" name="community" required>
                        <option value="">请选择</option>
                        <option value="107">山水名苑</option>
                        <option value="108">阳光100</option>
                        <option value="109">泉城花园</option>
                        <option value="110">和平小区</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">负责网格员</label>
                    <select class="form-control" name="manager">
                        <option value="">暂不分配</option>
                        <option value="1001">张网格 (GW1001)</option>
                        <option value="1002">李审核 (GW1002)</option>
                        <option value="1003">王地址 (GW1003)</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeAddCommunityModal()">取消</button>
                    <button type="submit" class="btn btn-primary">确认添加</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 街道数据
        const streetData = {
            '历下区': ['泉城路街道', '解放路街道', '千佛山街道', '趵突泉街道', '文东街道', '龙洞街道'],
            '市中区': ['大观园街道', '杆石桥街道', '四里村街道', '王官庄街道', '舜玉路街道', '魏家庄街道'],
            '槐荫区': ['匡山街道', '振兴街街道', '美里湖街道', '段店北路街道', '张庄街道', '营市街街道'],
            '天桥区': ['北园街道', '无影山街道', '天桥东街街道', '南村街道', '堤口路街道', '制锦市街道']
        };
        
        // 切换标签页
        function switchTab(tabId) {
            // 更新标签页状态
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.classList.remove('active');
            });
            
            const clickedTab = Array.from(tabs).find(tab => 
                (tabId === 'gridManagers' && tab.textContent.includes('网格员')) ||
                (tabId === 'communities' && tab.textContent.includes('小区')) ||
                (tabId === 'activities' && tab.textContent.includes('操作'))
            );
            
            if (clickedTab) {
                clickedTab.classList.add('active');
            }
            
            // 更新内容区域
            const tabPanes = document.querySelectorAll('.tab-pane');
            tabPanes.forEach(pane => {
                pane.classList.remove('active');
            });
            
            const targetPane = document.getElementById(tabId);
            if (targetPane) {
                targetPane.classList.add('active');
            }
        }
        
        // 修改返回列表的跳转方式
        function backToList() {
            window.location.href = 'grid-list.html';
        }
        
        // 修改查看网格员详情的跳转方式
        function viewGridManager(managerId) {
            window.location.href = 'grid-manager.html?id=' + managerId;
        }
        
        // 修改查看地址详情的跳转方式
        function viewAddressDetail(addressId) {
            window.location.href = 'pending-address-detail.html?id=' + addressId;
        }
    </script>
</body>
</html>